<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        table {
            border-collapse: collapse;

        }

        tbody tr:nth-child(odd) {
            background: #ccc;
        }

        td {
            width: 100px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border-top: 1px solid black;
            /* border-left: none;
            border-right: none; */
            /* border: 1px solid #000; */
            font: 20px;
        }

        /* .main {
            padding: 50px, 30px;
            width: 300px;
            height: 300px;
            margin: 0, auto;
        } */

        div {
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, .5);
            position: fixed;
            top: 0;
            left: 0;
            display: none;
            justify-content: center;
            align-items: center;
        }

        p {
            width: 300px;
            height: 300px;
            background: #fff;
            padding: 50px;

        }

       
    </style>
</head>

<body>
   
        姓&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp名: <input name="addName" type="text" autocomplete="off">
        <br>
        联系电话: <input name="addPhone" type="text" autocomplete="off">
        <br>
        学&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp历: <select name="addEducation">
            <option value="0">硕士及以上</option>
            <option value="1">本科</option>
            <option value="2">专科</option>
            <option value="3">高中</option>
            <option value="4">其他</option>
        </select>
        <br>
        年&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp龄: <input name="addAge" type="text">
        <br>
        期望薪资: <input name="addPay" type="text">
        <br>


        <button name="addBtn">保存</button>
        <button name="addReset">重置</button>
    
    <hr>
    <table>
        <thead>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>联系电话</td>
                <td>学历</td>
                <td>年龄</td>
                <td>期望薪资</td>
                <td>操作1</td>
                <td>操作2</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>

    <div class="set">
        <p>

            姓名: <input name="changeName" type="text"><br>
            联系电话: <input name="changePhone" type="text"><br>
            <!-- 性别: 
                男<input type="radio" name="changeSex" value="男">
                女<input type="radio" name="changeSex" value="女">
                保密<input type="radio" name="changeSex" value="保密"><br> -->
            学历: <select name="changeEducation">
                <option value="0">硕士及以上</option>
                <option value="1">本科</option>
                <option value="2">专科</option>
                <option value="3">高中</option>
                <option value="4">其他</option>
            </select><br><br>
            年龄: <input type="text" name="changeAge"><br>
            期望薪资: <input type="text" name="changePay"><br>

            <button  class="changeBtn" name="changeBtn">修改</button>
            <button class="cancelBtn" name="cancelBtn">取消</button>
        </p>
    </div>

    <script>
        // 1, 定义数组,模拟数据库数据,数据格式是 数组中存储对象
        // 将 数组 存储到 localStorage中
        window.localStorage.arr = JSON.stringify([
            { id: 1, name: '张三', phone: 12345678901, education: '硕士及以上', age: 18, pay: '12000', },
            { id: 2, name: '李四', phone: 12345678901, education: '本科', age: 19, pay: '13000', },
            { id: 3, name: '王五', phone: 12345678901, education: '专科', age: 20, pay: '12000', },
            { id: 4, name: '赵六', phone: 12345678901, education: '高中', age: 21, pay: '10000', },
            { id: 5, name: '刘七', phone: 12345678901, education: '其他', age: 22, pay: '10000', },
        ]);

        // 创建对应的数组
        var educationArr = ['硕士及以上', '本科', '专科', '高中', '其他'];

        // 2, 获取标签对象

        // tbody 标签对象
        var oTbody = document.querySelector('tbody');

        // 获取一套新增操作的标签对象
        // 新增button按钮
        var oAddBtn = document.querySelector('[name="addBtn"]');
        var oAddReset = document.querySelector('[name="addReset"]');

        var oAddIptName = document.querySelector('[name="addName"]');
        var oAddIptPhone = document.querySelector('[name="addPhone"]');
        var oAddSelEducation = document.querySelector('[name="addEducation"]');
        var oAddIptAge = document.querySelector('[name="addAge"]');
        var oAddIptPay = document.querySelector('[name="addPay"]');

        // meiyou 
        // var oAddSelSex = document.querySelectorAll('[name="addSex"]');


        // 获取一条修改操作的标签对象
        var oDiv = document.querySelector('div');


        var oChangeBtn = document.querySelector('[name="changeBtn"]');
        var oCancelBtn = document.querySelector('[name="cancelBtn"]');

        var oChangeIptName = document.querySelector('[name="changeName"]');
        var oChangeIptPhone = document.querySelector('[name="changePhone"]');
        var oChangeSelEducation = document.querySelector('[name="changeEducation"]');
        var oChangeIptAge = document.querySelector('[name="changeAge"]');
        var oChangeIptPay = document.querySelector('[name="changePay"]');


        var oChangeSelOpt = oChangeSelEducation.querySelectorAll('option');
        // var oChangeSelSex = document.querySelectorAll('[name="changeSex"]');

        // 判断输入的电话号码是否正确
        oAddIptPhone.addEventListener('onblur', function () {
            var phoneStr = oAddIptPhone.value;
            if (!(/^1[3456789]\d{9}$/.test(phone))) {
                alert("手机号码有误，请重填");
                return false;
            } else {

            }
        });


        // 定义变量,存储修改按钮点击时,获取的要修改的数据的id值
        var changeIndex = 0;

        // 调用函数 动态生成页面
        setPage();

        // 定义 删除按钮 / 修改按钮的事件
        // 通过 事件委托语法实现
        oTbody.addEventListener('click', function (event) {

            // 判断 如果 点击的是删除按钮
            if (event.target.getAttribute('name') === 'del') {
                // 获取 当前 localStorage 中的数据 数组
                const arr = JSON.parse(window.localStorage.arr);

                // 弹出确认框 点击确定执行程序
                if (!window.confirm('您确定要删除吗')) { return }

                // 当前点击的标签 存储的id 和 数组中id相同 
                // 删除数组中的这个单元 
                let index = Number(event.target.getAttribute('index'));


                // 循环遍历数组  如果 数组中id 和 点击删除标签存储的id相同 
                // 删除这个数组单元
                arr.forEach(function (item, key) {
                    if (item.id === index) {
                        arr.splice(key, 1);
                    }
                })

                // 将 新数组 设定给 localStorage 
                window.localStorage.arr = JSON.stringify(arr);

                // 再根据新的 localStorage 动态生成页面
                setPage();


                // 判断 如果 点击的是修改按钮
            } else if (event.target.getAttribute('name') === 'change') {
                // 获取当前 localStorage 中的数据
                const arr = JSON.parse(window.localStorage.arr);

                // 显示 修改 页面
                oDiv.style.display = 'flex';


                // 获取当前修改按钮的id值
                let index = Number(event.target.getAttribute('index'));
                changeIndex = index;

                // 根据 id值 设定 修改界面 显示的默认内容
                // 循环遍历数组 对象存储的id 和 修改标签存储的id相同 写入数据
                arr.forEach((item) => {
                    // item 是 存储 数据的对象 

                    if (item.id === index) {

                        oChangeIptName.value = item.name;
                        oChangeIptPhone.value = item.phone;

                        oChangeIptAge.value = item.age;
                        oChangeIptPay.value = item.pay;
                        // 循环性别数组 如果 标签的数据 和 存储的数据相同 添加 默认选中
                        // oChangeSelSex.forEach(i => {
                        //     // 标签i的value 和 对象item存储的sex 相同
                        //     if (i.value === item.sex) {
                        //         // 给标签 添加 选中效果
                        //         i.checked = true;
                        //     }
                        // })

                        // 当前 对象存储的城市文字 转化为 数组中的索引下标
                        // 城市数组 循环遍历  城市标签的数据  和 存储文字转化的索引下标 如果相同
                        // 城市标签 添加 默认选中
                        let num = educationArr.indexOf(item.education);

                        // 循环遍历城市标签数组
                        oChangeSelOpt.forEach(i => {
                            if (Number(i.value) === num) {
                                i.selected = true;
                            }
                        })

                    }
                })


            }

        })

        // 给 一直存在的 修改 取消 新增 添加事件

        // 取消 
        // 让 修改div 隐藏
        oCancelBtn.addEventListener('click', function () {
            oDiv.style.display = 'none';
        })

        // 修改
        // 获取 修改div 中 标签的数据 
        // 修改 点击标签 对应的 数组中的数据 
        // 新数组 赋值 给 localStorage 
        // 根据新的localStorage 再次动态生成页面
        oChangeBtn.addEventListener('click', function () {
            // 获取 标签中的数据
            let name = oChangeIptName.value;
            let phone = oChangeIptPhone.value;
            let education = educationArr[Number(oChangeSelEducation.value)];
            let age = oChangeIptAge.value;
            let pay = oChangeIptPay.value;

            // let sex = '';
            // oChangeSelSex.forEach(item => {
            //     // 循环遍历 性别标签 如果 是选中状态 获取 数据
            //     if (item.checked) {
            //         sex = item.value;
            //     }
            // })

            // 修改数组 
            // 循环遍历 如果 id值 相同 修改这个数组单元的数据
            // 获取 localStorage 中 存储的数据
            const arr = JSON.parse(window.localStorage.arr);

            arr.forEach(item => {
                console.log(item.id, changeIndex);

                if (item.id === changeIndex) {
                    item.name = name;
                    item.phone = phone;
                    item.education = education;
                    item.age = age;
                    item.pay = pay;

                }

            })

            // 将 新数组 写入 localStorage 再次调用函数 生成新页面
            // 将 新数组 设定给 localStorage 
            window.localStorage.arr = JSON.stringify(arr);

            // 再根据新的 localStorage 动态生成页面
            setPage();

            // 隐藏修改div
            oDiv.style.display = 'none';


        })

        // 新增
        // 获取 新增div中 标签的数据
        // 生成 对象 写入 数组的末位
        // id值 是 当前数组 最后一个单元 id值+1 
        // 实际项目中 应该是 数据库 自动 操作的结果 
        oAddBtn.addEventListener('click', function () {
            // 获取数据
            let name = oAddIptName.value;
            let phone = oAddIptPhone.value;
            let education = educationArr[Number(oAddSelEducation.value)];
            let age = oAddIptAge.value;

            let pay = oAddIptPay.value;

            // let sex = '';
            // oAddSelSex.forEach(item => {
            //     if (item.checked) {
            //         sex = item.value;
            //     }
            // })

            // 获取 localStorage 中 存储的数据
            const arr = JSON.parse(window.localStorage.arr);

            // 创建一个新对象 写入 数组的末位
            arr.push({ id: arr[arr.length - 1].id + 1, name, phone, education, age, pay });


            // 将 新数组 设定给 localStorage 
            window.localStorage.arr = JSON.stringify(arr);

            // 再根据新的 localStorage 动态生成页面
            setPage();
        })


        oAddReset.addEventListener('click', function () {
            // let name = oAddIptName.value;
            // let phone = oAddIptPhone.value;
            console.log = oAddSelEducation.value;
            // let age = oAddIptAge.value;
            // let pay = oAddIptPay.value; 

            oAddIptName.value = '';
            oAddIptPhone.value = '';
            educationArr[Number(oAddSelEducation.value)] = '';
            oAddIptAge.value = '';
            oAddIptPay.value = '';
        })



        // 定义函数 动态生成页面
        function setPage() {
            // 获取 localStorage 中 存储的数据
            const arr = JSON.parse(window.localStorage.arr);
            // console.log(arr);

            // 根据数组动态生成页面
            if (arr.length === 0) {
                // 如果是 空数组 生成 对应的内容
                oTbody.innerHTML = '<tr><td colspan="7">暂无数据</td></tr>'

            } else {
                // 如果不是空数组 循环遍历 数组arr 动态生成页面
                let str = '';
                arr.forEach(function (item) {
                    str += `
                        <tr>
                            <td>${item.id}</td>
                            <td>${item.name}</td>
                            <td>${item.phone}</td>
                            <td>${item.education}</td>
                            <td>${item.age}</td>
                            <td>${item.pay}</td>
                            <td><button name="del" index="${item.id}">删除</button></td>
                            <td><button name="change" index="${item.id}">修改</button></td>
                        </tr>
                    `;
                })

                oTbody.innerHTML = str;
            }
        }


    </script>
</body>

</html>